/*----------------------------------------------------------------------------
 * VisualPopupZone
 * ---------------------------------------------------------------------------
 * Date      : 2011-08-22
 * Author    : Testking
 * ---------------------------------------------------------------------------
 * USAGE
 * ---------------------------------------------------------------------------
 * $(selector).VisualPopupZone({'delay':time});
 * ---------------------------------------------------------------------------
 * EXAMPLE
 * ---------------------------------------------------------------------------
 *
 *----------------------------------------------------------------------------
 */
$(function() {
	/* main visual */
	$('div.popupZone').PopupZone();
});

$.fn.VisualPopupZone	= function (option)
{
	option = option || {};

	var element		= $(this);
	var interval	= null;
	var current		= 0;
	var delay		= option.delay ? option.delay : 5000;
	var fade_delay	= option.fade_delay ? option.fade_delay : 3000;
	var banner		= $(element).children('ul.banner');
	var size		= parseInt($(banner).children('li').size());
	var is_focus	= false;

	if (size==1) { $(banner).css('overflow', 'hidden'); }
	if (size<2) { return; }

	$(banner).css('overflow', 'hidden').children('li').each(function(i)
	{
		if (i>0) { $(this).hide(); }

		$(this).children('a:first').focus(function()
		{
			is_focus	= true;
			clearInterval(interval);
		});

		$(this).children('a:first').mouseover(function()
		{
			clearInterval(interval);
		});

		$(this).children('a:first').blur(function()
		{
			is_focus	= false;
			interval	= setInterval(rotate, delay);
		});

		$(this).children('a:first').mouseout(function()
		{
			if (is_focus===true)
			{
				clearInterval(interval);
			}
			else
			{
				rotate();
				interval	= setInterval(rotate, delay);
			}
		});

	});

	var btn_class_off	= 'btnOff';
	var btn_class_on	= 'btnOn';
	var btn_img_off = '<img src="img/main/visual_num.gif" alt="1" width="10" height="10" />';
	var btn_img_on = '<img src="img/main/visual_num_on.gif" alt="1" width="10" height="10" />';

	var popupzone_numbers	= '<ul class="num">';

		for(var i=0; i<size; i++)
		{
			var href	= '#' + $(banner).children('li:nth-child('+(i+1)+')').attr('id');
			var alt		= $(banner).children('li:nth-child('+(i+1)+')').find('img').attr('alt');
			var cls		= btn_class_off;
			var img		= btn_img_off;

			if (i==0) {
				cls	= btn_class_on;
				img = btn_img_on;
			}

			popupzone_numbers	+= '<li><a href="' + href + '" class="' + cls + '" title="' + alt + '">'+img+'</a></li>';
		}

		popupzone_numbers	+= '</ul>';

		$(element).after(popupzone_numbers);
		$('ul.num').children('li').each(function(i)
		{
			var num	= i;

			$(this).children('a').click(function()
			{
				current	= num;

				var bg = $(banner).children('li:visible').find('img:first').attr('src');
				$(banner).children('li').hide();

				// fadein ó??
				$(banner).css('background', "url('" + bg + "') left top no-repeat");
				$(banner).children('li:nth-child('+(current+1)+')').fadeIn(fade_delay);

				// ?Ϲ? ó??
				//$(banner).children('li:nth-child('+(current+1)+')').show();
				//$(banner).children('li:nth-child('+(current+1)+')').children('a:first').focus();
				clearInterval(interval);

				$('ul.num li').children('a').attr('class', btn_class_off);
				$('ul.num li').children('a').html(btn_img_off);
				$('ul.num').children('li:nth-child('+(current+1)+')').children('a').attr('class', btn_class_on);
				$('ul.num').children('li:nth-child('+(current+1)+')').children('a').html(btn_img_on);

				return false;
			});
		});

	var rotate	= function ()
	{
		current++;

		if (current>=size) { current = 0; }

		var bg = $(banner).children('li:visible').find('img:first').attr('src');
		$(banner).children('li').hide();

		// fadein ó??
		$(banner).css('background', "url('" + bg + "') left top no-repeat");
		$(banner).children('li:nth-child('+(current+1)+')').fadeIn(fade_delay);

		//$(banner).children('li:nth-child('+(current+1)+')').show();

		$('ul.num li').children('a').attr('class', btn_class_off);
		$('ul.num li').children('a').html(btn_img_off);
		$('ul.num').children('li:nth-child('+(current+1)+')').children('a').attr('class', btn_class_on);
		$('ul.num').children('li:nth-child('+(current+1)+')').children('a').html(btn_img_on);

	};

	interval	= setInterval(rotate, delay);

};